      <!DOCTYPE html>
      <html>
          <header></header>
          <body>
            <!-- ## html代码 -->
            <input id="file1" type="file" accept="image/*">
            <img id="IMG1">
            <script>
// ## js代码
        var IMG1 = "";
        var IMG2 = "";
        var IMG3 = "";
        ///将图片转换为BASE64
        function directTurnIntoBase64(input_file, callback) {
            /*input_file：文件按钮对象*/
            /*callback: 转换成功后执行的方法*/
            if (typeof (FileReader) === 'undefined') {
                alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");
            } else {
                try {
                    /*图片转Base64 核心代码*/
                    var file = input_file.files[0];
                    //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
                    if (!/image\/\w+/.test(file.type)) {
                        alert("请确保文件为图像类型");
                        return false;
                    }
                    var reader = new FileReader();
                    reader.onload = function() {
                        callback(this.result);
                    }
                    reader.readAsDataURL(file);
                } catch (e) {
                    alert('图片转Base64出错啦！' + e.toString())
                }
            }
        }
        // 对图片进行压缩
        function compress(fileObj, callback) {
            if ( typeof (FileReader) === 'undefined') {
                console.log("当前浏览器内核不支持base64图标压缩");
                //调用上传方式不压缩
                directTurnIntoBase64(fileObj,callback);
            } else {
                try {
                    var file = input_file.files[0];
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var image = $('<img/>');
                        image.load(function(){
                            square = 700,   //定义画布的大小，也就是图片压缩之后的像素
                                canvas = document.createElement('canvas'),
                                context = canvas.getContext('2d'),
                                imageWidth = 0,    //压缩图片的大小
                                imageHeight = 0,
                                offsetX = 0,
                                offsetY = 0,
                                //data = '';
                                canvas.width = square;
                            canvas.height = square;
                            context.clearRect(0, 0, square, square);
                            if (this.width > this.height) {
                                imageWidth = Math.round(square * this.width / this.height);
                                imageHeight = square;
                                offsetX = - Math.round((imageWidth - square) / 2);
                            } else {
                                imageHeight = Math.round(square * this.height / this.width);
                                imageWidth = square;
                                offsetY = - Math.round((imageHeight - square) / 2);
                            }
                            context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
                            var data = canvas.toDataURL('image/jpeg');
                            //压缩完成执行回调
                            callback(data);
                        });
                        image.attr('src', e.target.result);
                    };
                    reader.readAsDataURL(file);
                }catch(e){
                    console.log("压缩失败!");
                    //调用直接上传方式  不压缩
                    directTurnIntoBase64(fileObj,callback);
                }
            }
        }
        $('#file1').on('change', function() {
            compress(this, function(data) {
                $('#IMG1').attr('src', data);
            });

        });
        $('#file2').on('change', function() {
            compress(this, function(data) {
                $('#IMG2').attr('src', data);
            });

        });
        $('#file3').on('change', function() {
            compress(this, function(data) {
                $('#IMG3').attr('src', data);
            });
        });
            </script>
          </body>
      </html>